<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>人事管理系统 ——用户管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>


    <link href="../css/css.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
    <link href="../js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="../js/ligerUI/skins/Aqua/css/ligerui-all.css">
    <link href="../css/pager.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" href="../js/ligerUI/skins/Gray/css/all.css">

    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
    <script src="../js/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/ligerui.min.js"></script>
    <script src="../js/a/vue.js"></script>
    <script src="../js/a/axios-0.18.0.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/a/index.js"></script>
    <script src="../js/a/axios-config.js"></script>

</head>
<body>
<div id="app">
    <!-- 导航 -->
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td width="15" height="32"><img src="../images/main_locleft.gif" width="15" height="32"></td>
            <td class="main_locbg font2"><img src="../images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：用户管理 &gt; 用户查询</td>
            <td width="15" height="32"><img src="../images/main_locright.gif" width="15" height="32"></td>
        </tr>
    </table>

    <table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
        <!-- 查询区  -->
        <tr valign="top">
            <td height="30">
                <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
                    <tr>
                        <td class="fftd">

                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="font3">
                                        用户名：<input type="text" name="username" v-model="params.username">
                                        用户状态：
                                        <select name="status" id="status" @change="chooseCore($event)">
                                            <option value="">全部</option>
                                            <option v-bind:value="status.id"
                                                    v-for="status in user_status"
                                                    :key="status.id">
                                                {{status.label}}</option>
                                        </select>
                                        <input type="submit" value="搜索" v-on:click="userAllSelect()"/>
                                        <input type="button" value="删除" v-on:click="delJob()"/>
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 数据展示区 -->
        <tr valign="top">
            <td height="20">
                <table width="100%" border="1" cellpadding="5" cellspacing="0"
                       style="border:#c2c6cc 1px solid; border-collapse:collapse;">
                    <thead id="userSelect">
                    <tr class="main_trbg_tit" align="center">
                        <td><input type="checkbox" name="checkAll" id="checkAll" v-on:click="checkboxAll($event)"></td>
                        <td>登录名</td>
                        <td>密码</td>
                        <td>用户名</td>
                        <td>用户状态</td>
                        <td>创建时间</td>

                        <td align="center">操作</td>
                    </tr>
                    </thead>
                    <tbody ref="table">
<!--                    <colgroup>-->
<!--                        <col width="5%">-->
<!--                        <col width="30%">-->
<!--                        <col width="55%">-->
<!--                        <col width="10%">-->
<!--                    </colgroup>-->
                        <tr v-for="user in userAll" :key="user.id" align="center" class="main_trbg userSelectTr">
                            <td><input type="checkbox" class="checkAll" v-bind:value="user.id">
                            </td>
                            <td>{{user.username}}</td>
                            <td>{{user.password}}</td>
                            <td>{{user.nickname}}</td>
                            <td>{{user_status[user.status-1].label}}</td>
                            <td>{{user.createTime}}</td>
                            <td align="center" width="40px;">
                                <a v-bind:href="'showUpdateUSer.html?id='+user.id+'&username='+user.username+'&nickname='+user.nickname+'&status='+user.status">
                                    <img title="修改" src="../images/update.gif">
                                </a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>

        <!-- 分页标签 -->
        <tr valign="top">
            <td align="center" class="font3">
                <table width="100%" align="center" style="font-size:13px;" class="digg">
                    <tbody>
                    <tr>
                        <el-pagination
                                @size-change="changeSize"
                                @current-change="changeNum"
                                :current-page.sync="params.pageNum"
                                :page-sizes="[3, 5, 10, 20]"
                                :page-size.sync="params.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                        <!--            <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none"><span class="disabled" @click="handleSizeChange">上一页</span><span-->
                        <!--                class="current" v-model="params.pageNum">1</span><span @click="handleSizeChange">下一页</span>&nbsp;跳转到&nbsp;&nbsp;<input-->
                        <!--                style="text-align: center;BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none"-->
                        <!--                type="text" size="2" id="pager_jump_page_size">&nbsp;<input type="button"-->
                        <!--                                                                            style="text-align: center;BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none"-->
                        <!--                                                                            value="确定" id="pager_jump_btn"></td>-->
                        <!--          </tr>-->
                    <tr align="center">
                        <td style="font-size:13px;"></td>
                    </tr>
                    <tr>
                        <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">总共&nbsp;{{total}}&nbsp;条记录，当前显示{{(params.pageNum-1)*params.pageSize
                        + 1}}-{{(params.pageNum-1)*params.pageSize + params.pageSize}}条记录。
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <div style="height:10px;"></div>
</div>

<script>
    vm = new Vue({
       el: '#app',
       data: {
        user_status: '',
        userAll: [],
        total: 0,
        params: {
           pageNum: 1,
           pageSize: 5,
           username: '',
           status: '',
        },
       },
       methods: {
           userAllSelect() {
               axios.get('/api/user/page', {
                   params: this.params
               }).then(res => {
                   if (res.data.code == '200') {
                       console.log(this.params)
                       this.userAll = res.data.data.list;
                       this.total = res.data.data.total;
                   } else if (res.data.msg) {
                       this.$message.error(res.data.msg);
                   } else {
                       this.$message.error('系统错误');
                   }
               }).catch(err => {
                   this.$message.error(err);
                   console.log(err);
               });
           },
           changeSize(pageSize) {//改变每页条数时执行的函数
               this.params.pageSize = pageSize;
               this.userAllSelect();
           },
           changeNum(pageNum) {//改变页码时执行的函数
               this.params.pageNum = pageNum;
               this.userAllSelect();
           },
           //多选框的全选，全部取消
           checkboxAll(e) {
               let checked = e.target.checked;
               let checkDom = this.$refs.table.getElementsByClassName("checkAll");
               if (checked) {
                   for (let i = 0; i < checkDom.length; i++) {
                       checkDom[i].checked = true;
                   }
               } else {
                   for (let i = 0; i < checkDom.length; i++) {
                       checkDom[i].checked = false;
                   }
               }
           },
           //删除功能
           delJob() {
               let ids = [];
               let checkDom = this.$refs.table.getElementsByClassName("checkAll");
               for (let i = 0; i < checkDom.length; i++) {
                   if (checkDom[i].checked == true) {
                       ids.push(checkDom[i].value);
                   }
               }
               $.ligerDialog.confirm("确认要删除" + ids.join() + "吗?", "删除职位", (r) => {
                   if (r) {
                       let formData = new FormData()
                       formData.append('ids', ids.join());
                       axios.post('/api/user/removes', formData)
                           .then(res => {
                                   if (res.data.code == 200) {
                                       this.userAllSelect();
                                       this.$message.success(res.data.msg)
                                   } else if (res.data.msg) {
                                       this.$message.error(res.data.msg);
                                   } else {
                                       this.$message.error('系统错误');
                                   }
                               }
                           )
                   }
               });
           },
//获取用户状态表格
           userStatus(){
               this.user_status = JSON.parse(sessionStorage.user_status);
               console.log(this.user_status);
           },
           chooseCore(event){
               this.params.status = event.target.value;
           },
       },
       created(){
         this.userAllSelect();
         this.userStatus();
       }
    });
</script>

</body>
</html>
